<template>
  <div>
    <van-form @submit="onSubmit" ref="vanform" class="login-box">
      <van-field
        v-model="phone"
        type="phone"
        name="phone"
        label="手机号码"
        placeholder="手机号码"
        right-icon="question-o"
        @click-right-icon="$toast('请填写正确的手机号')"
      />
      <!-- :rules="[{ pattern,message: '请填写正确的手机号码' }]" -->
      <van-field
        v-model="password"
        type="password"
        name="validator"
        label="密码"
        placeholder="密码"
        rule="password"
        right-icon="question-o"
        @click-right-icon="$toast('密码要6位以上')"
      />
      <a class="forget" href="###">忘记密码</a>
      <button class="btn" native-type="submit" @click="submit()">登陆</button>
    </van-form>
    <div class="logo">
      <img src="//img05.yiguoimg.com/d/web/190916/00191/161811/greylogo.png" alt />
    </div>
    <div class="footer">
      <label for="label">
        <input type="checkbox" id="label" v-model="check" />
        我已阅读并同意
        <a>《易果服务协议》</a>和
        <a>《隐私条款》</a>
      </label>
    </div>
  </div>
</template>

<script>
import userApi from "@/api/userApi";
import { setToken, setUser } from "@/utils/auth"; //引入cookie方法
export default {
  data() {
    return {
      phone: "",
      password: "",
      check: false
    };
  },

  components: {},

  methods: {
    //按钮提交
    onSubmit(values) {
      // console.log("submit", values);
    },
    //验证
    submit: function(phone, password) {
      const psw = /\d{6}/;
      const poe = /1\d{10}/;

      if (this.phone == "") {
        this.$toast("手机号码不能为空");
        return false;
      } else if (!poe.test(this.phone)) {
        this.$toast("请输入正确的电话号码");
        return false;
      }

      if (this.password == "") {
        this.$toast("密码不能为空");
        return false;
      } else if (!psw.test(this.password)) {
        this.$toast("密码要6位以上");
        return false;
      }
      // else {
      //   this.$toast("密码错误");
      //   return false;
      // }

      if (this.check == false) {
        this.$toast("请阅读并同意服务协议");
        return false;
      }

      try {
        userApi.login(this.phone, this.password).then(res => {
          console.log(res.data);
          if (res.data.flag) {
            //登陆成功
            this.$toast({
              icon: "success",
              message: "登陆成功"
            });
            //存储token和用户信息到本地
            let userinf = {
              userphone: this.phone,
              username: res.data.data[0].username,
              id: res.data.data[0].id
            };
            setToken(res.data.token, 3);
            setUser(JSON.stringify(userinf), 3);

            //登陆成功，跳转到首页
            this.$router.push({
              path: "/home"
            });
          } else {
            //登陆失败
            this.$toast({
              icon: "cross",
              message: "登陆失败",
              type: "error"
            });
          }
        });
      } catch (err) {
        this.$toast({
          icon: "fail",
          message: "服务器异常",
          type: "error"
        });
      }
    }

    //登陆
    // loginfrom() {
    //   this.$emit("gogo");
    //   // console.log(this.required);
    // }
  }
};
</script>

<style scoped>
.login-box {
  position: relative;
}
.login-box .forget {
  font-size: 12px;
  color: #666666;
  position: absolute;
  left: 80%;
  bottom: 46%;
}
</style>